@import '../stakingConfig';

.component {
  border-bottom: 1px solid var(--theme-staking-wallet-row-border-color);
  display: flex;
  justify-content: space-between;
  overflow: visible;
  padding: 20px 0;

  :global {
    .SimpleBubble_root {
      .SimpleBubble_bubble {
        left: initial;
        line-height: initial;
        right: -10px;
      }
    }
  }

  &:last-child {
    border-bottom: 0;
  }

  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .title {
      @extend %accentText;
      margin-bottom: 4px;

      .hardwareWalletsIcon {
        svg {
          height: 12px;
          margin-left: 6px;
          width: 12px;

          path {
            fill: var(--theme-staking-font-color-accent);
          }
        }
      }
    }

    .description {
      @extend %regularText;
      align-items: center;
      display: flex;
      font-size: 14px;
      margin-bottom: -2px;

      .donutRing {
        margin: 0 8px;
      }
    }
  }

  .right {
    align-items: center;
    display: flex;
    justify-content: space-between;
    max-width: 332px;
    width: 100%;

    .stakePoolTile {
      background-color: var(--theme-button-flat-background-color-disabled);
      border-radius: 4px;
      height: 71px;
      overflow: hidden;
      padding: 25px 9px;
      position: relative;
      text-align: center;
      width: 80px;

      .stakePoolName {
        align-items: center;
        display: flex;
        justify-content: center;
      }

      .activeAdaSymbol {
        margin-right: 4px;

        svg {
          height: 9px;
          width: 8px;

          & > g {
            & > g {
              stroke: var(
                --theme-staking-wallet-row-ticker-ada-icon-fill-color
              );
            }
          }
        }
      }

      .nonDelegatedText {
        @extend %accentBoldText;
        font-size: 8px;
        line-height: 1.25;
        margin-top: 6px;
        text-transform: uppercase;
      }

      .stakePoolUnknown {
        @extend %accentBoldText;
        font-size: 8px;
        line-height: 1.25;
        margin-top: 6px;
        text-transform: uppercase;
      }

      .stakePoolTicker {
        @extend %accentText;
        @extend %stakePoolTicker;
        line-height: 1.57;
      }

      &:last-child {
        margin-right: 0;
      }

      &.futureStakePoolTileDelegated {
        background-color: var(--theme-staking-stake-pool-background-color);
        border: solid 1px var(--theme-staking-stake-pool-border-color);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0;

        > div {
          align-items: center;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 6px 0 0 0;
        }

        .stakePoolTicker {
          padding-left: 0;
          position: relative;
          text-transform: uppercase;
          top: 0;
          transition: top 200ms ease-in-out;
        }

        .ranking {
          @extend %accentBoldText;
          font-size: 20px;
          font-weight: bold;
          line-height: 1.2;
          position: relative;
          text-align: center;
          top: 0;
          transition: top 200ms ease-in-out;

          sup {
            font-family: Verdana;
            font-size: 14px;
            margin-left: -1px;
            position: absolute;
            top: -2px;
          }
        }

        .stakePoolUnknown {
          transition: margin-top 200ms ease-in-out,
            padding-top 200ms ease-in-out;
        }

        .noDataDash {
          align-items: center;
          display: flex;
          height: 27px;
          justify-content: center;

          :global {
            .SVGInline {
              align-items: center;
              display: flex;
              justify-content: center;

              svg {
                height: 3px;
                width: 12px;

                path {
                  fill: var(--theme-staking-stake-pool-grey-color) !important;
                  opacity: 1 !important;
                }
              }
            }
          }
        }

        .saturationBar {
          background: var(
            --theme-staking-stake-pool-saturation-background-color
          );
          border-radius: 2px;
          height: 5px;
          margin: 46px auto 0;
          overflow: hidden;
          position: absolute;
          width: 40px;

          span {
            border-radius: 2px;
            bottom: 0;
            height: inherit;
            left: 0;
            position: absolute;
            top: 0;
          }

          &.green span {
            background: var(--theme-staking-stake-pool-saturation-green-color);
          }

          &.orange span {
            background: var(--theme-staking-stake-pool-saturation-orange-color);
          }

          &.red span {
            background: var(--theme-staking-stake-pool-saturation-red-color);
          }

          &.yellow span {
            background: var(--theme-staking-stake-pool-saturation-yellow-color);
          }
        }

        .stakePoolRankingIndicator {
          border-radius: 0 0 4px 4px;
          height: 5px;
          margin-top: 58px;
          position: absolute;
          width: 80px;
        }

        .action {
          margin-top: 48px;
          position: absolute;
        }

        &.active {
          cursor: pointer;

          .stakePoolTicker {
            top: -5px;
          }

          .ranking {
            top: -7px;
          }

          .saturationBar,
          .stakePoolRankingIndicator {
            opacity: 0;
          }

          .stakePoolUnknown {
            margin-top: 12px;
          }
        }
      }

      &.futureStakePoolTileUndelegated,
      &.futureStakePoolTileUndefined {
        background-color: var(--theme-staking-stake-pool-background-color);
        border: solid 1px var(--theme-staking-stake-pool-border-color);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 24px 11px;

        .stakePoolUnknown,
        .nonDelegatedText {
          transition: margin-top 200ms ease-in-out,
            padding-top 200ms ease-in-out;
        }

        .action {
          bottom: 0;
          left: 0;
          position: absolute;
        }
      }
    }

    .tooltipLabelWrapper {
      font-family: var(--font-regular);
      font-size: 13px;
      text-transform: initial;
    }

    .action {
      @extend %accentText;
      align-items: center;
      background-color: var(--theme-button-primary-background-color);
      border-radius: 0 0 4px 4px;
      color: var(--theme-button-primary-text-color);
      cursor: pointer;
      display: flex;
      font-size: 8px;
      font-weight: bold;
      height: 22px;
      justify-content: center;
      line-height: 1.25;
      margin-left: -1px;
      opacity: 0;
      position: absolute;
      text-transform: uppercase;
      transition: opacity 0.2s ease-in;
      width: 80px;

      &:hover {
        background-color: var(--theme-button-primary-background-color-hover);
      }

      &:active {
        background-color: var(--theme-button-primary-background-color-active);
      }
    }

    :global {
      .LoadingSpinner_component.LoadingSpinner_medium
        .LoadingSpinner_icon
        svg
        path {
        fill: var(--theme-loading-spinner-color);
      }
    }

    &.isRestoring {
      display: flex;
      justify-content: flex-end;
    }
  }

  &:hover {
    .right {
      .stakePoolTile {
        &.futureStakePoolTileUndelegated,
        &.futureStakePoolTileUndefined {
          .stakePoolUnknown,
          .nonDelegatedText {
            margin-top: -6px;
          }
        }

        &.futureStakePoolTileDelegated {
          cursor: pointer;

          .stakePoolTicker {
            top: -5px;
          }

          .ranking {
            top: -7px;
          }

          .saturationBar,
          .stakePoolRankingIndicator {
            opacity: 0;
          }

          .stakePoolUnknown {
            margin-top: 12px;
          }
        }

        .action {
          opacity: 1 !important;
        }
      }
    }
  }

  .arrow {
    height: 18px;
    opacity: 0.3;

    > svg {
      height: 6px;
      transform: rotate(90deg);

      path {
        stroke: var(--theme-staking-font-color-regular);
      }
    }
  }
}
